<template>
    <!-- 登录、注册部分 -->
    <div class="wrapper">
        <!-- header部分 -->
        <header>
            <div class="icon-location-box">
                <i class="fas fa-map-marker-alt"></i>
            </div>
            <!-- <div class="location-text">天津大学北洋园校区<i class="fa fa-caret-down"></i></div> -->
            <div class="location-text" @click="showLocationPicker">
                <span class="location-display">{{ displayLocation }}</span>
                <i class="fa fa-caret-down"></i>
            </div>

            <!-- 漂亮的位置选择弹窗 -->
            <transition name="fade">
                <div v-if="showPicker" class="location-modal" @click.self="hideLocationPicker">
                    <div class="modal-container">
                        <div class="modal-header">
                            <h3>选择位置</h3>
                            <button class="close-btn" @click="hideLocationPicker">
                                <i class="fa fa-times"></i>
                            </button>
                        </div>

                        <div class="modal-content">
                            <!-- 位置层级导航 -->
                            <div class="location-nav">
                                <div v-for="(level, index) in locationLevels" :key="index"
                                    :class="['nav-item', { active: currentLevel === index, disabled: index > currentLevel }]"
                                    @click="switchLevel(index)">
                                    {{ level }}
                                </div>
                            </div>

                            <!-- 位置列表 -->
                            <div class="location-list-container">
                                <div v-if="loading" class="loading-state">
                                    <i class="fa fa-spinner fa-spin"></i>
                                    <span>加载中...</span>
                                </div>

                                <div v-else-if="locationData.length === 0" class="empty-state">
                                    <i class="fa fa-map-marker"></i>
                                    <span>暂无数据</span>
                                </div>

                                <div v-else class="location-items">
                                    <div v-for="item in locationData" :key="item.id"
                                        :class="['location-item', { selected: isSelected(item) }]"
                                        @click="selectLocation(item)">
                                        <span class="item-name">{{ item.name }}</span>
                                        <i v-if="isSelected(item)" class="fa fa-check selected-icon"></i>
                                    </div>
                                </div>
                            </div>

                            <!-- 当前选择显示 -->
                            <div v-if="selectedLocation.province" class="current-selection">
                                <span>已选择：</span>
                                <span class="selection-text">
                                    {{ getDisplayText(selectedLocation) }}
                                </span>
                            </div>
                        </div>

                        <div class="modal-footer">
                            <button class="btn-cancel" @click="hideLocationPicker">取消</button>
                            <button class="btn-confirm" @click="confirmLocation">确认</button>
                        </div>
                    </div>
                </div>
            </transition>

            <div class="login-register">
                <template v-if="!userInfo">
                    <button @click="goToLChoose">登录</button>
                    <button @click="goToRChoose">注册</button>
                </template>
                <template v-else>
                    <div class="user-info">
                        <div class="scroll-text">
                            <span>{{ userInfo.username }} ，您好！</span>
                        </div>
                    </div>
                </template>
            </div>
        </header>
        <!-- search部分 -->
        <div class="search">
            <div class="search-fixed-top" ref="fixedBox">
                <div class="search-box">
                    <i class="fa fa-search"></i>
                    <input v-model="searchKeyword" type="text" placeholder="搜索饿了么商家" @keyup.enter="performSearch" />
                    <button @click="performSearch" class="search-btn">搜索</button>
                </div>
            </div>
        </div>


        <!-- 点餐分类部分 -->
        <ul class="foodtype">
            <li @click="toBusinessList(1)">
                <img src="@/assets/dcfl01.png" alt="美食">
                <p>美食</p>
            </li>
            <li @click="toBusinessList(2)">
                <img src="@/assets/dcfl02.png" alt="早餐">
                <p>早餐</p>
            </li>
            <li @click="toBusinessList(3)">
                <img src="@/assets/dcfl03.png" alt="跑腿代购">
                <p>跑腿代购</p>
            </li>
            <li @click="toBusinessList(4)">
                <img src="@/assets/dcfl04.png" alt="汉堡披萨">
                <p>汉堡披萨</p>
            </li>
            <li @click="toBusinessList(5)">
                <img src="@/assets/dcfl05.png" alt="甜品饮品">
                <p>甜品饮品</p>
            </li>
            <li @click="toBusinessList(6)">
                <img src="@/assets/dcfl06.png" alt="速食简餐">
                <p>速食简餐</p>
            </li>
            <li @click="toBusinessList(7)">
                <img src="@/assets/dcfl07.png" alt="地方小吃">
                <p>地方小吃</p>
            </li>
            <li @click="toBusinessList(8)">
                <img src="@/assets/dcfl08.png" alt="米粉面馆">
                <p>米粉面馆</p>
            </li>
            <li @click="toBusinessList(9)">
                <img src="@/assets/dcfl09.png" alt="包子粥铺">
                <p>包子粥铺</p>
            </li>
            <li @click="toBusinessList(10)">
                <img src="@/assets/dcfl10.png" alt="炸鸡炸串">
                <p>炸鸡炸串</p>
            </li>
        </ul>

        <!-- 销量冠军轮播图部分 -->
        <div class="top-businesses-carousel">
            <div class="carousel-header">
                <h3>🏆 销量冠军榜</h3>
                <p>最受欢迎的优质商家</p>
            </div>

            <div v-if="!topThreeBusinesses || topThreeBusinesses.length === 0" class="empty-carousel">
                <div class="empty-state">
                    <i class="fa fa-trophy"></i>
                    <p>暂无销量冠军数据</p>
                </div>
            </div>

            <div class="carousel-3d-container" v-if="topThreeBusinesses && topThreeBusinesses.length > 0">
                <!-- 左侧箭头按钮 -->
                <div class="carousel-arrow carousel-arrow-left" @click="prevSlide">
                    <i class="fa fa-chevron-left"></i>
                </div>

                <!-- 轮播图内容 -->
                <div v-for="(business, index) in topThreeBusinesses" :key="business.id" :class="[
                    'carousel-3d-item',
                    {
                        'active': index === currentSlide,
                        'left': index === getPrevIndex(),
                        'right': index === getNextIndex()
                    }
                ]" @click="goToSlide(index)">
                    <div class="business-card-3d">
                        <!-- 排名徽章 -->
                        <div class="rank-badge" :class="getRankClass(index)">
                            <span>{{ getRankText(index) }}</span>
                        </div>

                        <!-- 商家图片 -->
                        <div class="business-image">
                            <img :src="business.businessImg || require('@/assets/business-default.png')"
                                :alt="business.businessName" @error="handleImageError" @click="toBusinessInfo(business.id)">
                        </div>

                        <!-- 商家信息 -->
                        <div class="business-info">
                            <h4>{{ business.businessName || '未命名商铺' }}</h4>
                            <div class="stats">
                                <div class="stat-item rating-stat">
                                    <i class="fa fa-star"></i>
                                    <span>{{ business.score || getBusinessRating(business.id) }}</span>
                                </div>
                                <div class="stat-item sales-stat">
                                    <i class="fa fa-fire"></i>
                                    <span>{{ business.salesCount || 0 }}</span>
                                </div>
                            </div>
                            <div class="delivery-info">
                                <div class="delivery-tag">
                                    <span class="tag-label">起送</span>
                                    <span class="tag-price">¥{{ (business.startPrice || 0).toFixed(2) }}</span>
                                </div>
                                <div class="delivery-tag">
                                    <span class="tag-label">配送</span>
                                    <span class="tag-price">¥{{ (business.deliveryPrice || 0).toFixed(2) }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 右侧箭头按钮 -->
                <div class="carousel-arrow carousel-arrow-right" @click="nextSlide">
                    <i class="fa fa-chevron-right"></i>
                </div>

                <!-- 指示器 -->
                <div class="carousel-indicators">
                    <span v-for="(business, index) in topThreeBusinesses" :key="index"
                        :class="['indicator', { active: index === currentSlide }]" @click="goToSlide(index)"></span>
                </div>
            </div>
        </div>

        <!-- 超级会员部分 -->
        <div class="supermember">
            <div class="left">
                <img src="@/assets/super_member.png" alt="超级会员">
                <h3>超级会员</h3>
                <p>&#8226; 每月享超值权益</p>
            </div>
            <div class="right">
                立即开通 &gt;
            </div>
        </div>

        <!-- 推荐商家部分 -->
        <div class="recommend">
            <div class="recommend-line"></div>
            <p>推荐商家</p>
            <div class="recommend-line"></div>
        </div>

        <!-- 推荐方式部分 -->
        <ul class="recommendtype">
            <li :class="{ active: sortBy === 'default' }" @click="setSortBy('default')">
                综合排序<i class="fa fa-caret-down"></i>
            </li>

            <li :class="{ active: sortBy === 'sales' }" @click="setSortBy('sales')">
                销量最高
            </li>
            <li :class="{ active: showFilter }" @click="toggleFilter">
                筛选<i class="fa fa-filter"></i>
            </li>
        </ul>

        <!-- 筛选弹窗 -->
        <transition name="fade">
            <div v-if="showFilter" class="filter-modal" @click.self="hideFilter">
                <div class="filter-container">
                    <div class="filter-header">
                        <h3>筛选条件</h3>
                        <button class="close-btn" @click="hideFilter">
                            <i class="fa fa-times"></i>
                        </button>
                    </div>

                    <div class="filter-content">
                        <!-- 免配送费筛选 -->
                        <div class="filter-section">
                            <h4>配送费</h4>
                            <label class="filter-option">
                                <input type="checkbox" v-model="filters.freeDelivery" @change="applyFilters">
                                <span>免配送费</span>
                            </label>
                        </div>

                        <!-- 起送价筛选 -->
                        <div class="filter-section">
                            <h4>起送价</h4>
                            <div class="price-range">
                                <label class="filter-option">
                                    <input type="radio" name="startPrice" value="0" v-model="filters.startPrice"
                                        @change="applyFilters">
                                    <span>不限</span>
                                </label>
                                <label class="filter-option">
                                    <input type="radio" name="startPrice" value="20" v-model="filters.startPrice"
                                        @change="applyFilters">
                                    <span>20元以下</span>
                                </label>
                                <label class="filter-option">
                                    <input type="radio" name="startPrice" value="30" v-model="filters.startPrice"
                                        @change="applyFilters">
                                    <span>30元以下</span>
                                </label>
                                <label class="filter-option">
                                    <input type="radio" name="startPrice" value="50" v-model="filters.startPrice"
                                        @change="applyFilters">
                                    <span>50元以下</span>
                                </label>
                            </div>
                        </div>
                    </div>

                    <div class="filter-footer">
                        <button class="btn-reset" @click="resetFilters">重置</button>
                        <button class="btn-confirm" @click="confirmFilters">确定</button>
                    </div>
                </div>
            </div>
        </transition>

        <!-- 推荐商家列表部分 -->
        <div v-if="!businessList || businessList.length === 0" class="empty-business-list">
            <div class="empty-state">
                <i class="fa fa-store"></i>
                <p>暂无商家数据</p>
                <p class="empty-hint">请稍后再试或检查网络连接</p>
            </div>
        </div>

        <ul class="business-list" v-if="businessList && businessList.length > 0">
            <li v-for="business in businessList" :key="business.id || business.businessId"
                @click="toBusinessInfo(business.id || business.businessId)">
                <div class="business-info">
                    <img :src="business.businessImg || require('@/assets/business-default.png')"
                        @error="handleImageError" :alt="business.businessName">
                    <div class="business-info-detail">
                        <h3>{{ business.businessName || '未命名商铺'}}</h3>
                        <div class="business-info-rating">
                            <span class="rating-score">{{ business.score || getBusinessRating(business.id ||
                                business.businessId) }}分</span>
                            <span class="monthly-sales">月售 {{ business.salesCount || 0 }}</span>
                        </div>
                        <div class="business-info-delivery">
                            <span class="start-price">起送 ¥{{ (business.startPrice || 0).toFixed(2) }}</span>
                            <span class="delivery-fee" :class="{ 'free-delivery': (business.deliveryPrice || 0) === 0 }">
                                {{ (business.deliveryPrice || 0) === 0 ? '免配送费' : `配送 ¥${(business.deliveryPrice || 0).toFixed(2)}` }}
                            </span>
                        </div>
                        <div class="business-info-promotion">
                            <div class="business-info-promotion-left">
                            </div>
                        </div>
                    </div>
                </div>
            </li>
        </ul>
<ai-chatbot class="ai-chat"/>
        <!-- 底部菜单部分 -->

    </div>
</template>

<script>
import { ref, onMounted, onBeforeUnmount, computed } from 'vue';
import Footer from '../components/Footer.vue';
import AiChatbot from '../components/AiChatbot.vue';
import { useRouter } from 'vue-router';
import axios from 'axios';
import request from '../utils/request';
import AMapLoader from '@amap/amap-jsapi-loader';
import { toast } from '../utils/toast';
// 高德地图API key（请替换为你的实际key）
const AMAP_KEY = '24cce1eb31aec79422f44af47428fc8a';

export default {
    name: 'Index',
    setup() {
        const fixedBox = ref(null);
        const router = useRouter();
        const userInfo = ref(null);
        const businessList = ref([]);
        const originalBusinessList = ref([]); // 保存原始数据用于筛选和排序
        const ratingMap = ref({});

        // 轮播图相关
        const currentSlide = ref(0);
        const topThreeBusinesses = ref([]);
        let autoPlayTimer = null;

        const currentLocation = ref('定位中...');
        const searchKeyword = ref('');
        const sortBy = ref('default');
        const showPicker = ref(false);
        const showFilter = ref(false);
        const filters = ref({
            freeDelivery: false,
            startPrice: '0'
        });
        const loading = ref(false);
        const locationData = ref([]);
        const currentLevel = ref(0);
        const selectedLocation = ref({
            province: '',
            city: '',
            district: ''
        });
        const locationLevels = ref(['请选择省份', '请选择城市', '请选择区域']);
        // 新增：临时存储选择过程中的地址，不直接影响显示
        const tempSelectedLocation = ref({
            province: '',
            city: '',
            district: ''
        });

        // 计算显示的位置文本
        const displayLocation = computed(() => {
            const { province, city, district } = selectedLocation.value;

            // 如果有区级信息，显示完整省市区
            if (district && province && city) {
                // 如果是直辖市，省和市名相同，只显示一次省/市名
                if (province === city) {
                    return `${province} ${district}`;
                }
                return `${province} ${city} ${district}`;
            }

            // 只有省市信息
            if (province && city) {
                return `${province} ${city}`;
            }

            // 只有省信息
            if (province) {
                return province;
            }

            // 默认情况
            return currentLocation.value;
        });

        // 获取当前位置
        const getCurrentLocation = async () => {
            try {
                // 使用高德地图IP定位API
                console.log('🌍 开始获取位置信息...');
                // 直接使用axios而不是request，避免拦截器干扰
                const response = await axios.get(`https://restapi.amap.com/v3/ip?key=${AMAP_KEY}`);
                console.log('🌍 位置API响应:', response);

                // 高德地图API返回的数据在response.data中
                if (response && response.data && response.data.status === '1' && response.data.city) {
                    console.log('✅ 位置获取成功:', response.data.city);
                    currentLocation.value = response.data.city;
                    // 初始化选择位置
                    selectedLocation.value = {
                        province: response.data.province,
                        city: response.data.city,
                        district: ''
                    };
                } else {
                    console.log('⚠️ 位置API返回格式不正确，使用默认位置');
                    currentLocation.value = '天津大学北洋园校区';
                }
            } catch (error) {
                console.error('❌ 获取位置失败:', error);
                currentLocation.value = '天津大学北洋园校区';
                // 设置默认位置信息
                selectedLocation.value = {
                    province: '天津市',
                    city: '天津市',
                    district: '津南区'
                };
            }
        };

        // 显示位置选择器
        const showLocationPicker = () => {
            showPicker.value = true;
            loadProvinces();
        };

        // 隐藏位置选择器
        const hideLocationPicker = () => {
            showPicker.value = false;
            // 重置临时变量：恢复为当前已确认的最终地址
            tempSelectedLocation.value = { ...selectedLocation.value };
        };

        // 加载省份数据
        const loadProvinces = async () => {
            loading.value = true;
            try {
                const response = await axios.get(`https://restapi.amap.com/v3/config/district?key=${AMAP_KEY}&keywords=中国&subdistrict=1`);
                if (response.data.status === '1') {
                    locationData.value = response.data.districts[0].districts;
                    currentLevel.value = 0;
                }
            } catch (error) {
                console.error('加载省份数据失败:', error);
            } finally {
                loading.value = false;
            }
        };

        // 加载城市数据
        const loadCities = async (provinceCode, provinceName) => {
            loading.value = true;
            try {
                const response = await axios.get(`https://restapi.amap.com/v3/config/district?key=${AMAP_KEY}&keywords=${provinceCode}&subdistrict=1`);
                if (response.data.status === '1' && response.data.districts[0].districts) {
                    locationData.value = response.data.districts[0].districts;
                    currentLevel.value = 1;
                    tempSelectedLocation.value.province = provinceName;
                    // 重置临时变量的城市/区域（避免之前的残留值）
                    tempSelectedLocation.value.city = '';
                    tempSelectedLocation.value.district = '';
                }
            } catch (error) {
                console.error('加载城市数据失败:', error);
            } finally {
                loading.value = false;
            }
        };

        // 加载区域数据
        const loadDistricts = async (cityCode, cityName) => {
            loading.value = true;
            try {
                const response = await axios.get(`https://restapi.amap.com/v3/config/district?key=${AMAP_KEY}&keywords=${cityCode}&subdistrict=1`);
                if (response.data.status === '1' && response.data.districts[0].districts) {
                    locationData.value = response.data.districts[0].districts;
                    currentLevel.value = 2;
                    tempSelectedLocation.value.city = cityName;
                    // 重置临时变量的区域
                    tempSelectedLocation.value.district = '';
                }
            } catch (error) {
                console.error('加载区域数据失败:', error);
            } finally {
                loading.value = false;
            }
        };

        // 切换级别
        const switchLevel = (level) => {
            if (level < currentLevel.value) {
                currentLevel.value = level;
                if (level === 0) {
                    // 切换回省份级：重置临时变量的城市/区域
                    tempSelectedLocation.value.city = '';
                    tempSelectedLocation.value.district = '';
                    loadProvinces();
                } else if (level === 1) {
                    loadCities(tempSelectedLocation.value.province, tempSelectedLocation.value.province);
                    // 切换回城市级：重置临时变量的区域
                    tempSelectedLocation.value.district = '';
                }
            }
        };

        // 选择位置
        const selectLocation = (item) => {
            if (currentLevel.value === 0) {
                loadCities(item.adcode, item.name);
            } else if (currentLevel.value === 1) {
                loadDistricts(item.adcode, item.name);
            } else if (currentLevel.value === 2) {
                tempSelectedLocation.value.district = item.name;
            }
        };

        // 确认选择
        const confirmLocation = () => {
            const { province, city, district } = tempSelectedLocation.value; // 校验临时变量
            // 1. 严格校验：必须完整选择省、市、区
            if (!province) {
                toast.error("请先选择省份");
                return;
            }
            if (!city) {
                toast.error("请先选择城市");
                return;
            }
            if (!district) {
                toast.error("请先选择区域");
                return;
            }

            // 2. 校验通过：同步临时变量到最终变量
            selectedLocation.value = { ...tempSelectedLocation.value };
            // 3. 保存到本地存储
            localStorage.setItem('userLocation', JSON.stringify(selectedLocation.value));
            const displayText = getDisplayText(selectedLocation.value);
            localStorage.setItem('userLocationDisplay', displayText);

            // 4. 关闭弹窗
            hideLocationPicker();
        };
        // 新增一个方法来生成显示文本
        const getDisplayText = (location) => {
            const { province, city, district } = location;
            if (district && province && city) {
                if (province === city) {
                    return `${province} ${district}`;
                }
                return `${province} ${city} ${district}`;
            }
            if (province && city) {
                return `${province} ${city}`;
            }
            if (province) {
                return province;
            }
            return '未知位置';
        };

        // 检查是否选中
        const isSelected = (item) => {
            const { province, city, district } = tempSelectedLocation.value; // 关键：用临时变量
            if (currentLevel.value === 0) {
                return province === item.name;
            } else if (currentLevel.value === 1) {
                return city === item.name;
            } else if (currentLevel.value === 2) {
                return district === item.name;
            }
            return false;
        };


        const fetchUserInfo = async () => {

            const tokenFromLocal = localStorage.getItem('token');
            const tokenFromSession = sessionStorage.getItem('token');
            const storage = tokenFromLocal ? localStorage : (tokenFromSession ? sessionStorage : null);

            if (storage) {
                const savedUserInfo = storage.getItem('userInfo');
                if (savedUserInfo) {
                    try {
                        const parsedUserInfo = JSON.parse(savedUserInfo);
                        // 校验用户信息是否完整（避免存储的是无效数据）
                        if (parsedUserInfo.id && parsedUserInfo.username) { // 假设用户信息必须包含id和username
                            userInfo.value = parsedUserInfo;
                            console.log('从本地存储加载用户信息成功:', userInfo.value);
                            return; // 读取到有效信息，直接返回，不发请求
                        }
                    } catch (e) {
                        console.error('解析本地用户信息失败:', e);
                        storage.removeItem('userInfo'); // 删除损坏的存储数据
                    }
                }
            }

            const token = tokenFromLocal || tokenFromSession;
            if (!token) return;

            try {
                const res = await request.get('/api/user');
                if (res && res.id && res.username) { // 校验接口返回的用户信息完整性
                    userInfo.value = res;
                    console.log('从接口加载用户信息成功:', userInfo.value);
                    // 同步到本地存储（和token位置一致）
                    storage?.setItem('userInfo', JSON.stringify(res));
                } else {
                    console.error('获取用户信息失败：接口返回数据不完整');
                    userInfo.value = null;
                }
            } catch (error) {
                console.error('获取用户信息异常:', error);
                userInfo.value = null;
                if (error.response?.status === 401) {
                    localStorage.removeItem('token');
                    sessionStorage.removeItem('token');
                    localStorage.removeItem('userInfo');
                    sessionStorage.removeItem('userInfo');
                }
            }
        };

        const loadReactions = () => {
            try {
                return JSON.parse(localStorage.getItem('reactions')) || { likes: {}, favorites: {} };
            } catch (e) {
                return { likes: {}, favorites: {} };
            }
        };

        const getReactionCount = (businessId) => {
            const reactions = loadReactions();
            const likesMap = reactions.likes[String(businessId)] || {};
            const favsMap = reactions.favorites[String(businessId)] || {};
            const likes = Object.keys(likesMap).length;
            const favs = Object.keys(favsMap).length;
            return likes + favs;
        };

        const guessCommentCount = (biz) => {
            // 兼容不同后端字段命名，若不存在则为0
            return (
                biz.commentCount ??
                biz.comments ??
                biz.remarkNum ??
                biz.reviewCount ??
                0
            ) || 0;
        };

        const computeRatings = () => {
            const entries = originalBusinessList.value || [];
            if (!entries.length) { ratingMap.value = {}; return; }
            const reactionCounts = entries.map(b => getReactionCount(b.businessId || b.id));
            const commentCounts = entries.map(b => guessCommentCount(b));
            const rMin = Math.min(...reactionCounts);
            const rMax = Math.max(...reactionCounts);
            const cMin = Math.min(...commentCounts);
            const cMax = Math.max(...commentCounts);
            const weights = { comments: 0.6, reactions: 0.4 };
            const map = {};
            entries.forEach((b, idx) => {
                const r = reactionCounts[idx];
                const c = commentCounts[idx];
                const rNorm = rMax > rMin ? (r - rMin) / (rMax - rMin) : (r > 0 ? 1 : 0);
                const cNorm = cMax > cMin ? (c - cMin) / (cMax - cMin) : (c > 0 ? 1 : 0);
                const combined = weights.comments * cNorm + weights.reactions * rNorm;
                let rating = 1 + combined * 4; // map to [1,5]
                if (rating < 1) rating = 1;
                if (rating > 5) rating = 5;
                map[b.businessId || b.id] = rating.toFixed(1);
            });
            ratingMap.value = map;
        };

        const getBusinessRating = (businessId) => {
            return ratingMap.value[businessId] || '1.0';
        };

        // 获取销量前三的商家
        const updateTopThreeBusinesses = () => {
            request.get("/api/businesses/carousel")
                .then(response => {
                    if (response.success) {
                        topThreeBusinesses.value = response.data;
                        console.log('🏆 轮播图更新:', topThreeBusinesses.value.map(b => `${b.businessName}(销量${b.salesCount || 0})`).join(', '));

                        // 关键修改：数据更新后重启自动播放
                        restartAutoPlay();
                    }
                })
                .catch(error => {
                    console.error('获取轮播图数据失败:', error);
                    // 即使失败也要确保有自动播放
                    restartAutoPlay();
                });
        };

        // 轮播控制函数
        const goToSlide = (index) => {
            currentSlide.value = index;
            restartAutoPlay();
        };

        const nextSlide = () => {
            currentSlide.value = (currentSlide.value + 1) % topThreeBusinesses.value.length;
        };

        const prevSlide = () => {
            currentSlide.value = currentSlide.value === 0
                ? topThreeBusinesses.value.length - 1
                : currentSlide.value - 1;
        };

        const getPrevIndex = () => {
            return currentSlide.value === 0 ? 2 : currentSlide.value - 1;
        };

        const getNextIndex = () => {
            return currentSlide.value === 2 ? 0 : currentSlide.value + 1;
        };

        // 自动轮播功能
        const startAutoPlay = () => {
            if (topThreeBusinesses.value.length > 1) {
                autoPlayTimer = setInterval(() => {
                    nextSlide();
                }, 3000); // 3秒自动切换
            }
        };

        const stopAutoPlay = () => {
            if (autoPlayTimer) {
                clearInterval(autoPlayTimer);
                autoPlayTimer = null;
            }
        };

        const restartAutoPlay = () => {
            stopAutoPlay();
            startAutoPlay();
        };

        // 排名相关函数
        const getRankClass = (index) => {
            const classes = ['champion', 'runner-up', 'third'];
            return classes[index] || 'other';
        };

        const getRankText = (index) => {
            const texts = ['冠军', '亚军', '季军'];
            return texts[index] || '优秀';
        };


        // 排序商家列表
        const sortBusinessList = (list, sortType) => {
            console.log('=== 开始排序商家列表 ===');
            console.log('排序类型:', sortType);
            console.log('待排序商家数量:', list.length);

            // 显示排序前有销量的商家
            const beforeSalesData = list.filter(b => (b.salesCount || 0) > 0);
            console.log('排序前有销量的商家:', beforeSalesData.map(b => ({
                name: b.businessName,
                id: b.id,
                sales: b.salesCount
            })));

            const sortedList = [...list];

            switch (sortType) {
                case 'default':
                    // 综合排序：评分优先，评分相同则按ID排序（ID大的在前，表示较新的商家）
                    sortedList.sort((a, b) => {
                        const scoreA = parseFloat(a.score || getBusinessRating(a.id || a.businessId));
                        const scoreB = parseFloat(b.score || getBusinessRating(b.id || b.businessId));

                        // 评分比较（保留一位小数精度）
                        const scoreDiff = Math.round((scoreB - scoreA) * 10) / 10;
                        if (Math.abs(scoreDiff) >= 0.1) {
                            return scoreDiff; // 评分降序
                        }

                        // 评分相同，按ID排序（ID越大表示越新）
                        const idA = parseInt(a.id || a.businessId || 0);
                        const idB = parseInt(b.id || b.businessId || 0);
                        return idB - idA; // ID降序（新的在前）
                    });
                    break;

                case 'sales':
                    // 销量排序：销量优先，销量相同则按ID排序（ID大的在前）
                    console.log('🔄 执行销量排序');
                    sortedList.sort((a, b) => {
                        const salesA = parseInt(a.salesCount || 0);
                        const salesB = parseInt(b.salesCount || 0);

                        // 详细记录排序过程
                        if (salesA > 0 || salesB > 0) {
                            console.log(`比较: ${a.businessName}(销量${salesA}) vs ${b.businessName}(销量${salesB})`);
                        }

                        if (salesA !== salesB) {
                            const result = salesB - salesA; // 销量降序（高销量在前）
                            if (salesA > 0 || salesB > 0) {
                                console.log(`  结果: ${result > 0 ? b.businessName : a.businessName} 排在前面`);
                            }
                            return result;
                        }

                        // 销量相同，按ID排序（ID越大表示越新）
                        const idA = parseInt(a.id || a.businessId || 0);
                        const idB = parseInt(b.id || b.businessId || 0);
                        return idB - idA; // ID降序（新的在前）
                    });
                    console.log('✅ 销量排序完成');
                    break;

                default:
                    // 默认不排序，保持原有顺序
                    break;
            }

            // 显示排序后的结果
            const afterSalesData = sortedList.filter(b => (b.salesCount || 0) > 0);
            console.log('排序后有销量的商家:', afterSalesData.map((b, index) => ({
                排名: index + 1,
                name: b.businessName,
                id: b.id,
                sales: b.salesCount
            })));

            console.log('=== 排序完成 ===');
            return sortedList;
        };

        const navigateToOrders = () => {
            router.push({ path: '/orders' });
        };
        const handleScroll = () => {
            let scroll = window.scrollY || document.documentElement.scrollTop;
            let width = document.documentElement.clientWidth;
            let search = fixedBox.value;

            if (scroll > width * 0.12) {
                search.style.position = 'fixed';
                search.style.left = '0';
                search.style.top = '0';
            } else {
                search.style.position = 'static';
            }
        };
        // 测试API接口连通性
        const testAPIConnection = async () => {
            console.log('🧪 === 测试API连通性 ===');

            // 测试基础连接
            try {
                console.log('🔄 测试基础连接...');
                const healthResponse = await request.get('/api/businesses/search?keyword=&isScore=0&isSales=0');
                console.log('✅ API连接成功');
                console.log('响应类型:', typeof healthResponse);
                console.log('响应内容:', healthResponse);

                return healthResponse;
            } catch (error) {
                console.error('❌ API连接失败:', error);
                console.error('- 错误类型:', error.name);
                console.error('- 错误消息:', error.message);
                console.error('- 响应状态:', error.response?.status);
                console.error('- 响应数据:', error.response?.data);

                // 检查常见问题
                if (error.code === 'ECONNREFUSED') {
                    console.error('🚨 后端服务器未启动或端口不正确');
                } else if (error.response?.status === 404) {
                    console.error('🚨 API端点不存在');
                } else if (error.response?.status === 500) {
                    console.error('🚨 后端服务器内部错误');
                }

                return null;
            }
        };

        // 测试用硬编码数据
        const testWithHardcodedData = () => {
            console.log('🧪 === 使用硬编码数据测试 ===');
            const testData = [
                {
                    "id": 1,
                    "businessName": "虾滑火锅",
                    "businessImg": "https://sunnybigevent.oss-cn-beijing.aliyuncs.com/bbd37656-0eae-41be-995e-e2be0b96aca2.png",
                    "startPrice": 120.00,
                    "deliveryPrice": 10.00,
                    "score": 1.00,
                    "salesCount": 4
                },
                {
                    "id": 40,
                    "businessName": "螺狮粉",
                    "businessImg": "https://sunnybigevent.oss-cn-beijing.aliyuncs.com/default-food.png",
                    "startPrice": 2.00,
                    "deliveryPrice": 10.00,
                    "score": 1.00,
                    "salesCount": 3
                },
                {
                    "id": 42,
                    "businessName": "发送",
                    "businessImg": "https://sunnybigevent.oss-cn-beijing.aliyuncs.com/18fa7ba5-83f2-4cc8-8b9f-e4ffaa10875d.png",
                    "startPrice": 1.00,
                    "deliveryPrice": 1.00,
                    "score": 1.00,
                    "salesCount": 2
                },
                {
                    "id": 37,
                    "businessName": "面的传奇面馆",
                    "businessImg": "https://sunnybigevent.oss-cn-beijing.aliyuncs.com/default-food.png",
                    "startPrice": 1.00,
                    "deliveryPrice": 1.00,
                    "score": 1.00,
                    "salesCount": 1
                },
                {
                    "id": 2,
                    "businessName": "黄焖鸡米饭黄焖鸡米饭",
                    "businessImg": null,
                    "startPrice": 2.00,
                    "deliveryPrice": 1.00,
                    "score": 1.00,
                    "salesCount": 0
                }
            ];

            console.log('🧪 硬编码数据:', testData);
            originalBusinessList.value = testData;
            computeRatings();
            updateTopThreeBusinesses(); // 更新轮播图数据
            applyFiltersAndSort();
        };

        onMounted(() => {
            console.log('🚀 === 页面加载开始 ===');
            console.log('Vue组件已挂载');

            // 先从localStorage获取保存的位置
            const savedLocation = localStorage.getItem('userLocation');
            if (savedLocation) {
                try {
                    const location = JSON.parse(savedLocation);
                    selectedLocation.value = location;
                    tempSelectedLocation.value = { ...location };

                    // 如果有保存的显示文本，直接使用
                    const savedDisplay = localStorage.getItem('userLocationDisplay');
                    if (savedDisplay) {
                        currentLocation.value = savedDisplay;
                    }
                } catch (e) {
                    getCurrentLocation();
                }
            } else {
                getCurrentLocation();
            }
            // 加载用户信息
            fetchUserInfo();

            window.addEventListener('scroll', handleScroll);

            console.log('📋 准备获取商家列表');

            // 🧪 临时使用硬编码数据测试 - 先测试硬编码数据是否正常
            // console.log('🧪 启用硬编码数据测试');
            // testWithHardcodedData();

            getBusinessList(); // 恢复API调用
            startAutoPlay();
        });

        onBeforeUnmount(() => {
            window.removeEventListener('scroll', handleScroll);
            stopAutoPlay(); // 清理自动轮播定时器
        });

        const toBusinessList = (orderTypeId) => {
            router.push({ path: '/BusinessList', query: { orderTypeId } });
        };
        const goToLChoose = () => {
            // 跳转到登录页面
            router.push({ path: '/login' });
        };
        const goToRChoose = () => {
            // 跳转到注册页面
            console.log('111111');
            router.push({ path: '/register' });
        }
        const navigateToSearch = () => {
            router.push({ path: '/search' });
        };

        // 执行搜索
        const performSearch = async () => {
            if (searchKeyword.value.trim() !== '') {
                try {
                    // 构建查询参数
                    const params = {
                        keyword: searchKeyword.value.trim()
                    };

                    // 根据排序方式添加参数
                    if (sortBy.value === 'score') {
                        params.isScore = 1;
                        params.isSales = 0;
                    } else if (sortBy.value === 'sales') {
                        params.isScore = 0;
                        params.isSales = 1;
                    } else {
                        params.isScore = 0;
                        params.isSales = 0;
                    }

                    console.log('搜索参数:', params);
                    console.log('请求URL:', '/api/businesses/search');

                    // 调用搜索接口
                    const response = await request.get('/api/businesses/search', { params });

                    console.log('111搜索响应:', response);
                    console.log('222响应状态:', response?.status);
                    console.log('333响应数据:', response?.data);

                    // 统一处理搜索API响应数据
                    console.log('🔍 搜索API响应数据结构分析:');
                    console.log('- response类型:', typeof response);
                    console.log('- response.success:', response?.success);
                    console.log('- response.data存在:', !!response?.data);

                    let searchData = null;

                    if (response && response.success && Array.isArray(response.data)) {
                        searchData = response.data;
                        console.log('✅ 搜索使用标准响应格式');
                    } else if (Array.isArray(response)) {
                        searchData = response;
                        console.log('✅ 搜索使用直接数组格式');
                    } else {
                        console.warn('❌ 搜索响应格式不正确:', response);
                        searchData = [];
                    }

                    if (searchData && searchData.length > 0) {
                        console.log('🔍 搜索到商家数据:', searchData.length, '个');
                        originalBusinessList.value = searchData;
                        computeRatings();
                        updateTopThreeBusinesses();
                        applyFiltersAndSort();
                    } else {
                        console.log('🔍 搜索无结果');
                        originalBusinessList.value = [];
                        businessList.value = [];
                        topThreeBusinesses.value = [];
                    }

                } catch (error) {
                    console.error('搜索失败:', error);
                    console.error('错误详情:', error.response?.data);
                    console.error('错误状态:', error.response?.status);
                    console.error('错误信息:', error.message);
                    // 如果搜索失败，显示所有商家
                    getBusinessList();
                }
            } else {
                // 如果搜索关键词为空，显示所有商家
                getBusinessList();
            }
        };

        // 设置排序方式
        const setSortBy = (type) => {
            console.log('🔄 === 用户点击排序按钮 ===');
            console.log('从', sortBy.value, '切换到', type);
            console.log('当前原始数据数量:', originalBusinessList.value.length);
            console.log('当前显示数据数量:', businessList.value.length);

            // 🔍 在排序前再次检查原始数据
            console.log('🔍 排序前最后检查 - originalBusinessList中的销量:');
            const preCheckSales = originalBusinessList.value.filter(b => (b.salesCount || 0) > 0);
            preCheckSales.forEach(business => {
                console.log(`- ${business.businessName}: salesCount=${business.salesCount}`);
            });

            sortBy.value = type;

            if (searchKeyword.value.trim() !== '') {
                console.log('🔍 有搜索关键词，执行搜索');
                performSearch(); // 重新搜索以应用新的排序
            } else {
                console.log('📋 无搜索关键词，直接排序筛选');
                // 对当前列表进行排序和筛选
                applyFiltersAndSort();
            }
        };

        // 获取商家列表
        const getBusinessList = async () => {
            console.log('=== 开始获取商家列表 ===');
            console.log('🔄 使用search接口获取数据');
            console.log('请求URL: /api/businesses/search');
            console.log('请求参数:', { keyword: '', isScore: 0, isSales: 0 });
            // 使用search接口获取所有商家数据
            request.get('/api/businesses/search', { params: { keyword: '', isScore: 0, isSales: 0 } })
                .then(response => {
                    console.log('=== 商家列表API响应 ===');
                    console.log('响应状态:', response?.status);
                    console.log('完整响应对象:', response);
                    console.log('响应数据结构:', {
                        success: response?.success,
                        hasData: !!response?.data,
                        dataType: Array.isArray(response?.data) ? 'Array' : typeof response?.data,
                        dataLength: response?.data?.length
                    });

                    // 🔍 详细检查response.data的前3个元素
                    if (response?.data && Array.isArray(response.data)) {
                        console.log('🔍 response.data前3个元素的详细信息:');
                        response.data.slice(0, 3).forEach((item, index) => {
                            console.log(`元素 ${index + 1}:`, item);
                            console.log(`  - businessName: ${item.businessName} (类型: ${typeof item.businessName})`);
                            console.log(`  - salesCount: ${item.salesCount} (类型: ${typeof item.salesCount})`);
                            console.log(`  - id: ${item.id} (类型: ${typeof item.id})`);
                        });

                        // 🔍 特别检查有销量的商家
                        const withSales = response.data.filter(item => item.salesCount > 0);
                        console.log('🏆 API返回的有销量商家:', withSales.map(item => ({
                            name: item.businessName,
                            sales: item.salesCount,
                            id: item.id
                        })));
                    }

                    // 统一处理API响应数据
                    console.log('🔍 API响应数据结构分析:');
                    console.log('- response类型:', typeof response);
                    console.log('- response.success:', response?.success);
                    console.log('- response.data存在:', !!response?.data);
                    console.log('- response.data是数组:', Array.isArray(response?.data));

                    let businessData = null;

                    // 处理不同的响应格式
                    if (response && response.success && Array.isArray(response.data)) {
                        // 标准格式: { success: true, data: [...] }
                        businessData = response.data;
                        console.log('✅ 使用标准响应格式 response.data');
                    } else if (Array.isArray(response)) {
                        // 直接返回数组格式
                        businessData = response;
                        console.log('✅ 使用直接数组格式 response');
                    } else {
                        console.warn('❌ 无法识别的响应格式:', response);
                        businessData = [];
                    }

                    if (businessData && businessData.length > 0) {
                        console.log('📊 获取到商家数据:', businessData.length, '个');

                        // 显示前3个商家的基本信息
                        console.log('🔍 前3个商家预览:');
                        businessData.slice(0, 3).forEach((business, index) => {
                            console.log(`${index + 1}. ${business.businessName}:`, {
                                id: business.id,
                                salesCount: business.salesCount,
                                score: business.score
                            });
                        });

                        // 统计有销量的商家
                        const businessesWithSales = businessData.filter(b => (b.salesCount || 0) > 0);
                        console.log('🏆 有销量的商家:', businessesWithSales.length, '个');
                        if (businessesWithSales.length > 0) {
                            console.log('销量排行:');
                            businessesWithSales
                                .sort((a, b) => (b.salesCount || 0) - (a.salesCount || 0))
                                .slice(0, 5)
                                .forEach((business, index) => {
                                    console.log(`  ${index + 1}. ${business.businessName}: ${business.salesCount}`);
                                });
                        }

                        originalBusinessList.value = businessData;
                        computeRatings();
                        updateTopThreeBusinesses();
                        applyFiltersAndSort();

                        console.log('✅ 数据加载完成:', {
                            总商家数: originalBusinessList.value.length,
                            显示商家数: businessList.value.length,
                            轮播图商家数: topThreeBusinesses.value.length
                        });

                    } else {
                        console.warn('❌ 没有获取到商家数据');
                        originalBusinessList.value = [];
                        businessList.value = [];
                        topThreeBusinesses.value = [];
                    }
                })
                .catch(error => {
                    console.error('❌ 获取商家列表失败:', error);
                    console.error('错误详情:', error.response?.data);
                    console.error('错误状态:', error.response?.status);
                    console.error('错误消息:', error.message);

                    // 设置空数据
                    originalBusinessList.value = [];
                    businessList.value = [];
                    topThreeBusinesses.value = [];

                    // 如果是网络错误，可以考虑重试
                    if (error.code === 'NETWORK_ERROR' || error.code === 'ECONNREFUSED') {
                        console.log('🔄 网络错误，3秒后自动重试...');
                        setTimeout(() => {
                            console.log('🔄 重试获取商家列表');
                            getBusinessList();
                        }, 3000);
                    }
                });
        };

        // 处理图片加载失败
        const handleImageError = (e) => {
            e.target.src = require('@/assets/default-business.png');
        };

        // 跳转到商家详情页
        const toBusinessInfo = (businessId) => {
            router.push({
                path: '/businessInfo',
                query: { businessId }
            });
        };

        // 筛选功能
        const toggleFilter = () => {
            showFilter.value = !showFilter.value;
        };

        const hideFilter = () => {
            showFilter.value = false;
        };

        // 应用筛选和排序的统一函数
        const applyFiltersAndSort = () => {
            console.log('🔧 === 开始应用筛选和排序 ===');
            console.log('筛选条件:', filters.value);
            console.log('排序方式:', sortBy.value);
            console.log('原始数据数量:', originalBusinessList.value.length);

            // 检查原始数据中的销量情况
            const originalSalesData = originalBusinessList.value.filter(b => (b.salesCount || 0) > 0);
            console.log('📈 原始数据中有销量的商家:', originalSalesData.map(b => ({
                name: b.businessName,
                id: b.id,
                sales: b.salesCount
            })));

            // 从原始数据开始筛选
            console.log('🔄 开始筛选 - 复制原始数据');
            let filteredList = [...originalBusinessList.value];

            // 🔍 检查复制后的数据
            console.log('🔍 复制后的数据检查:');
            const copiedWithSales = filteredList.filter(b => (b.salesCount || 0) > 0);
            copiedWithSales.forEach(business => {
                console.log(`- ${business.businessName}: salesCount=${business.salesCount} (类型: ${typeof business.salesCount})`);
            });

            // 免配送费筛选
            if (filters.value.freeDelivery) {
                const beforeCount = filteredList.length;
                filteredList = filteredList.filter(business =>
                    business.deliveryPrice === 0 || business.deliveryPrice === null
                );
                console.log(`免配送费筛选: ${beforeCount} -> ${filteredList.length}`);
            }

            // 起送价筛选
            if (filters.value.startPrice !== '0') {
                const maxPrice = parseInt(filters.value.startPrice);
                const beforeCount = filteredList.length;
                filteredList = filteredList.filter(business => {
                    const startPrice = business.startPrice || business.starPrice || 0;
                    return startPrice <= maxPrice;
                });
                console.log(`起送价筛选(≤${maxPrice}): ${beforeCount} -> ${filteredList.length}`);
            }

            console.log('筛选后数量:', filteredList.length);

            // 应用排序
            const sortedList = sortBusinessList(filteredList, sortBy.value);

            businessList.value = sortedList;
            console.log('筛选和排序后的商家列表:', sortedList.length, '个商家');

            // 输出前5个商家的排序信息用于调试
            if (sortedList.length > 0) {
                const debugInfo = sortedList.slice(0, 5).map(business => ({
                    name: business.businessName || '未命名',
                    score: parseFloat(business.score || getBusinessRating(business.id || business.businessId)),
                    sales: parseInt(business.salesCount || 0),
                    id: business.id || business.businessId,
                    rawSalesCount: business.salesCount // 显示原始销量数据
                }));
                console.log(`排序后前5个商家 (${sortBy.value}排序):`, debugInfo);

                // 如果是销量排序，特别显示销量信息
                if (sortBy.value === 'sales') {
                    const salesInfo = sortedList.map(business => ({
                        name: business.businessName || '未命名',
                        sales: parseInt(business.salesCount || 0),
                        id: business.id || business.businessId,
                        rawSalesCount: business.salesCount
                    })).sort((a, b) => b.sales - a.sales).slice(0, 8);
                    console.log('销量排序详情（前8名）:', salesInfo);
                }

                // 检查最终显示的数据
                console.log('🎯 === 最终显示数据检查 ===');
                console.log('最终businessList总数量:', businessList.value.length);
                console.log('最终businessList前5个商家详情:');
                businessList.value.slice(0, 5).forEach((business, index) => {
                    console.log(`${index + 1}. ${business.businessName}:`, {
                        id: business.id,
                        salesCount: business.salesCount,
                        score: business.score,
                        原始销量值: business.salesCount,
                        销量类型: typeof business.salesCount
                    });
                });

                // 特别检查模板绑定的数据
                console.log('🎭 模板显示检查 - 前5个商家的销量显示值:');
                businessList.value.slice(0, 5).forEach((business, index) => {
                    const displayValue = business.salesCount || 0;
                    console.log(`${index + 1}. ${business.businessName}: 显示值=${displayValue} (原值=${business.salesCount})`);
                });
            }
        };

        const applyFilters = () => {
            applyFiltersAndSort();
        };

        const resetFilters = () => {
            filters.value = {
                freeDelivery: false,
                startPrice: '0'
            };
            sortBy.value = 'default'; // 重置排序为默认
            applyFiltersAndSort();
        };

        const confirmFilters = () => {
            applyFiltersAndSort();
            hideFilter();
        };

        return {
            fixedBox,
            toBusinessList,
            navigateToOrders,
            goToLChoose,
            goToRChoose,
            userInfo,
            isuser: computed(() => !!userInfo.value),
            navigateToSearch,
            businessList,
            toBusinessInfo,
            handleImageError,
            getBusinessRating,
            displayLocation,
            showPicker,
            loading,
            locationData,
            currentLevel,
            locationLevels,
            selectedLocation,
            showLocationPicker,
            hideLocationPicker,
            switchLevel,
            selectLocation,
            isSelected,
            confirmLocation,
            getDisplayText,
            searchKeyword,
            sortBy,
            performSearch,
            setSortBy,
            showFilter,
            filters,
            toggleFilter,
            hideFilter,
            applyFilters,
            resetFilters,
            confirmFilters,
            applyFiltersAndSort,
            sortBusinessList,
            testWithHardcodedData,
            testAPIConnection,
            // 轮播图相关
            currentSlide,
            topThreeBusinesses,
            goToSlide,
            nextSlide,
            prevSlide,
            getPrevIndex,
            getNextIndex,
            getRankClass,
            getRankText,
            updateTopThreeBusinesses,
            startAutoPlay,
            stopAutoPlay,
            restartAutoPlay
        };
    },
    components: {
        Footer,
        AiChatbot
    }
}
</script>

<style scoped>
/****************** 总容器 ******************/
.wrapper {
    width: 100%;
    height: 100%;
}

/****************** header ******************/
.wrapper header {
    width: 100%;
    height: 12vw;
    background-color: #0097ff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 4vw;
    box-sizing: border-box;
}

/* 确保位置信息不会被挤压 */
.wrapper header .icon-location-box {
    width: 3.5vw;
    height: 3.5vw;
    margin-right: 1vw;
    flex-shrink: 0;
}

.wrapper header .location-text {
    font-size: 4.5vw;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
    white-space: nowrap;
}

.wrapper header .icon-location-box i {
    font-size: 5vw;
    color: #fff;
}

.wrapper header .location-text .fa-caret-down {
    margin-left: 1vw;
}

.user-info {
    width: 150px;
    /* 你可以根据右上角区域宽度调整 */
    overflow: hidden;
    white-space: nowrap;
    position: relative;
}

.scroll-text {
    display: inline-block;
    padding-left: 100%;
    /* 给动画留出空白 */
    animation: scroll-text 10s linear infinite;
}

@keyframes scroll-text {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-100%);
    }
}


/****************** 登录、注册部分 ******************/
.wrapper .login-register {
    display: flex;
    gap: 2vw;
    align-items: center;
    margin-left: 5vw;
    flex-grow: 1;
    justify-content: flex-end;
    /* 关键修改：此属性是解决 Flexbox 布局中子元素溢出问题的关键 */
    min-width: 0;
}

.wrapper .login-register .user-info {
    /* 删除 max-width: 100%，以确保容器可以根据内容宽度进行溢出 */
    font-size: 4vw;
    font-weight: 500;
    color: #fff;
    white-space: nowrap;
    /* 强制文本不换行 */

    /* 核心修改：允许水平滚动 */
    overflow-x: auto;
    /* 在水平方向上允许滚动 */
    overflow-y: hidden;
    /* 隐藏垂直方向的滚动条 */
    -webkit-overflow-scrolling: touch;
    /* 针对 iOS 设备实现更流畅的滚动 */

    /* 隐藏滚动条但保留滚动功能，让界面更美观 */
    scrollbar-width: none;
    /* 针对 Firefox */
    -ms-overflow-style: none;
    /* 针对 Internet Explorer 和 Edge */
}

/* 针对 Chrome, Safari 等 Webkit 内核浏览器隐藏滚动条 */
.wrapper .login-register .user-info::-webkit-scrollbar {
    display: none;
}

.wrapper .login-register button {
    padding: 1.5vw 3vw;
    border: none;
    background-color: white;
    color: #0097ff;
    cursor: pointer;
    border-radius: 1vw;
    transition: background-color 0.3s;
    font-size: 3.5vw;
    flex-shrink: 0;
}

.wrapper .login-register button:hover {
    background-color: #f0f0f0;
}

/****************** search ******************/
.wrapper .search {
    width: 100%;
    height: 13vw;
}

.wrapper .search .search-fixed-top {
    width: 100%;
    height: 13vw;
    background-color: #0097FF;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 20;
    /* 确保搜索框在轮播图之上 */
}

.wrapper .search .search-fixed-top .search-box {
    width: 90%;
    height: 9vw;
    background-color: #fff;
    border-radius: 2px;

    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 2vw;

    font-size: 3.5vw;
    color: #AEAEAE;
    font-family: "宋体";
    /*此样式是让文本选中状态无效*/
    user-select: none;
}

.wrapper .search .search-fixed-top .search-box input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: 3.5vw;
    color: #333;
    margin: 0 1vw;
}

.wrapper .search .search-fixed-top .search-box input::placeholder {
    color: #AEAEAE;
}

.wrapper .search .search-fixed-top .search-box .search-btn {
    background: #0097ff;
    color: white;
    border: none;
    padding: 1.5vw 3vw;
    border-radius: 1vw;
    font-size: 3vw;
    cursor: pointer;
    transition: background-color 0.3s;
}

.wrapper .search .search-fixed-top .search-box .search-btn:hover {
    background: #0080e0;
}

.wrapper .search .search-fixed-top .search-box .fa-search {
    margin-right: 1vw;
}

/* 排序选项样式 */
.sort-options {
    width: 100%;
    padding: 3vw;
    background-color: #f8f9fa;
    border-bottom: 1px solid #e0e0e0;
}

.sort-buttons {
    display: flex;
    gap: 2vw;
    justify-content: center;
    flex-wrap: wrap;
}

.sort-buttons button {
    padding: 2vw 4vw;
    border: 1px solid #ddd;
    background-color: white;
    color: #666;
    border-radius: 2vw;
    cursor: pointer;
    transition: all 0.3s;
    font-size: 3.2vw;
    min-width: 20vw;
}

.sort-buttons button:hover {
    border-color: #0097ff;
    color: #0097ff;
}

.sort-buttons button.active {
    background-color: #0097ff;
    color: white;
    border-color: #0097ff;
}

/****************** 点餐分类部分 ******************/
.wrapper .foodtype {
    width: 100%;
    height: 48vw;
    background-color: white;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    /*要使用align-content。10个子元素将自动换行为两行，而且两行作为一个整体垂直居中*/
    align-content: center;
}

.wrapper .foodtype li {
    /*一共10个子元素，通过计算，子元素宽度在16.7 ~ 20 之间，才能保证换两行*/
    width: 18vw;
    height: 20vw;

    display: flex;
    /*弹性盒子主轴方向设为column，然后仍然是垂直水平方向居中*/
    flex-direction: column;
    justify-content: center;
    align-items: center;

    user-select: none;
    cursor: pointer;
}

.wrapper .foodtype li img {
    width: 12vw;
    /*视频讲解时高度设置为12vw，实际上设置为10.3vw更佳*/
    height: 10.3vw;
}

.wrapper .foodtype li p {
    font-size: 3.2vw;
    color: #666;
}

/****************** 销量冠军3D轮播图部分 ******************/
.wrapper .top-businesses-carousel {
    width: 95%;
    margin: 1.5vw auto;
    /* 进一步减少上下外边距 */
    background: white;
    border-radius: 2vw;
    padding: 1.5vw 2vw;
    /* 进一步减少上下内边距 */
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    position: relative;
    z-index: 10;
    /* 确保在搜索框之下 */
}

.wrapper .top-businesses-carousel .carousel-header {
    text-align: center;
    margin-bottom: 1.5vw;
    /* 减少标题下方间距 */
    color: #333;
}

.wrapper .top-businesses-carousel .carousel-header h3 {
    font-size: 6vw;
    /* 增大字体大小 */
    margin: 0 0 1vw 0;
    font-weight: 700;
    text-shadow: none;
}

.wrapper .top-businesses-carousel .carousel-header p {
    font-size: 2.8vw;
    margin: 0;
    opacity: 0.7;
    color: #666;
}

.wrapper .top-businesses-carousel .carousel-3d-container {
    position: relative;
    height: 50vw;
    /* 减少整体高度，让占位更小 */
    min-height: 320px;
    /* 减少最小高度 */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 3vw 12vw;
    /* 减少内边距，让占位更小 */
    margin: -3vw -12vw;
    /* 调整负边距 */
}

.wrapper .top-businesses-carousel .carousel-3d-item {
    position: absolute;
    transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    cursor: pointer;
    transform-style: preserve-3d;
}

/* 中间激活状态 */
.wrapper .top-businesses-carousel .carousel-3d-item.active {
    z-index: 13;
    transform: translateX(0) scale(1);
    opacity: 1;
}

/* 左边状态 */
.wrapper .top-businesses-carousel .carousel-3d-item.left {
    z-index: 12;
    transform: translateX(-20vw) scale(0.75);
    opacity: 0.6;
}

/* 右边状态 */
.wrapper .top-businesses-carousel .carousel-3d-item.right {
    z-index: 12;
    transform: translateX(20vw) scale(0.75);
    opacity: 0.6;
}

.wrapper .top-businesses-carousel .business-card-3d {
    width: 38vw;
    /* 减少卡片宽度 */
    min-width: 240px;
    /* 减少最小宽度 */
    background: white;
    border-radius: 2vw;
    padding: 2.5vw;
    /* 减少内边距 */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    position: relative;
    overflow: hidden;
}

.wrapper .top-businesses-carousel .carousel-3d-item:hover .business-card-3d {
    transform: translateY(-0.5vw);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.2);
}

.wrapper .top-businesses-carousel .rank-badge {
    position: absolute;
    top: 0;
    right: 0;
    padding: 1.5vw 3vw;
    border-radius: 0 2vw 0 2vw;
    color: white;
    font-weight: 700;
    font-size: 2.5vw;
    z-index: 15;
}

.wrapper .top-businesses-carousel .rank-badge.champion {
    background: linear-gradient(135deg, #FFD700, #FFA500);
}

.wrapper .top-businesses-carousel .rank-badge.runner-up {
    background: linear-gradient(135deg, #C0C0C0, #A9A9A9);
}

.wrapper .top-businesses-carousel .rank-badge.third {
    background: linear-gradient(135deg, #CD7F32, #B8860B);
}

.wrapper .top-businesses-carousel .business-image {
    width: 100%;
    height: 25vw;
    /* 调整图片高度，在更小的卡片中保持比例 */
    min-height: 160px;
    /* 调整最小高度 */
    border-radius: 1.5vw;
    overflow: hidden;
    margin-bottom: 1.5vw;
    /* 减少底部间距 */
}

.wrapper .top-businesses-carousel .business-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.wrapper .top-businesses-carousel .carousel-3d-item:hover .business-image img {
    transform: scale(1.05);
}

.wrapper .top-businesses-carousel .business-info {
    text-align: center;
}

.wrapper .top-businesses-carousel .business-info h4 {
    font-size: 3.2vw;
    /* 稍微减少字体大小 */
    font-weight: 700;
    color: #333;
    margin: 0 0 1vw 0;
    /* 减少底部间距 */
    line-height: 1.2;
}

.wrapper .top-businesses-carousel .stats {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1.5vw;
    gap: 1.5vw;
}

.wrapper .top-businesses-carousel .stat-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.8vw;
    padding: 1.2vw 2vw;
    border-radius: 2vw;
    font-size: 2.5vw;
    font-weight: 600;
    flex: 1;
    color: white;
}

.wrapper .top-businesses-carousel .rating-stat {
    background: linear-gradient(135deg, #FF6B6B, #FF8E53);
}

.wrapper .top-businesses-carousel .rating-stat .fa-star {
    color: #FFD700;
}

.wrapper .top-businesses-carousel .sales-stat {
    background: linear-gradient(135deg, #4ECDC4, #44A08D);
}

.wrapper .top-businesses-carousel .sales-stat .fa-fire {
    color: #FF6B35;
}

.wrapper .top-businesses-carousel .delivery-info {
    display: flex;
    justify-content: space-between;
    gap: 1vw;
}

.wrapper .top-businesses-carousel .delivery-tag {
    display: flex;
    align-items: center;
    gap: 0.5vw;
    background: #f8f9fa;
    padding: 1vw 1.5vw;
    border-radius: 1.5vw;
    border: 1px solid #e9ecef;
    flex: 1;
    justify-content: center;
}

.wrapper .top-businesses-carousel .delivery-tag .tag-label {
    font-size: 2.2vw;
    color: #6c757d;
    font-weight: 500;
}

.wrapper .top-businesses-carousel .delivery-tag .tag-price {
    font-size: 2.4vw;
    color: #007bff;
    font-weight: 600;
}

/* 轮播箭头按钮 */
.wrapper .top-businesses-carousel .carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 8vw;
    height: 8vw;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid #ddd;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 3vw;
    color: #333;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    z-index: 16;
    opacity: 0;
    visibility: hidden;
}

.wrapper .top-businesses-carousel:hover .carousel-arrow {
    opacity: 1;
    visibility: visible;
}

.wrapper .top-businesses-carousel .carousel-arrow:hover {
    background: white;
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.wrapper .top-businesses-carousel .carousel-arrow-left {
    left: 8vw;
    /* 调整到扩大的悬停区域内 */
}

.wrapper .top-businesses-carousel .carousel-arrow-right {
    right: 8vw;
    /* 调整到扩大的悬停区域内 */
}

.wrapper .top-businesses-carousel .carousel-indicators {
    display: flex;
    justify-content: center;
    gap: 1.5vw;
    margin-top: 1.5vw;
    /* 减少指示器上方间距 */
}

.wrapper .top-businesses-carousel .indicator {
    width: 2.5vw;
    height: 2.5vw;
    border-radius: 50%;
    background: #ddd;
    cursor: pointer;
    transition: all 0.3s ease;
}

.wrapper .top-businesses-carousel .indicator.active {
    background: #667eea;
    transform: scale(1.2);
}

/****************** 超级会员部分 ******************/
.wrapper .supermember {
    /*这里也设置容器宽度95%，不能用padding，因为背景色也会充满padding*/
    width: 95%;
    margin: 0 auto;
    height: 11.5vw;
    background-color: #FEEDC1;
    margin-top: 1.3vw;
    border-radius: 2px;
    color: #644F1B;

    display: flex;
    justify-content: space-between;
    align-items: center;
}

.wrapper .supermember .left {
    display: flex;
    align-items: center;
    margin-left: 4vw;
    user-select: none;
}

.wrapper .supermember .left img {
    width: 6vw;
    height: 6vw;
    margin-right: 2vw;
}

.wrapper .supermember .left h3 {
    font-size: 4vw;
    margin-right: 2vw;
}

.wrapper .supermember .left p {
    font-size: 3vw;
}

.wrapper .supermember .right {
    font-size: 3vw;
    margin-right: 4vw;
    cursor: pointer;
}

/****************** 推荐商家部分 ******************/
.wrapper .recommend {
    width: 100%;
    height: 14vw;
    display: flex;
    justify-content: center;
    align-items: center;
}

.wrapper .recommend .recommend-line {
    width: 6vw;
    height: 0.2vw;
    background-color: #888;
}

.wrapper .recommend p {
    font-size: 4vw;
    margin: 0 4vw;
}

/****************** 推荐方式部分 ******************/
.wrapper .recommendtype {
    width: 100%;
    height: 5vw;
    margin-bottom: 5vw;

    display: flex;
    justify-content: space-around;
    align-items: center;
}

.wrapper .recommendtype li {
    font-size: 3.5vw;
    color: #555;
}

/****************** 推荐商家列表部分 ******************/
.wrapper .business-list {
    width: 100%;
    padding: 0;
    margin: 0 0 15vh 0;
    /* 添加底部边距，避免被 Footer 遮挡 */
    list-style: none;
}

.wrapper .business-list li {
    padding: 3vw;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    transition: background-color 0.3s;
}

.wrapper .business-list li:hover {
    background-color: #f9f9f9;
}

.wrapper .business-list li .business-info {
    display: flex;
    align-items: flex-start;
}

.wrapper .business-list li .business-info img {
    width: 20vw;
    height: 20vw;
    object-fit: cover;
    border-radius: 4px;
}

.wrapper .business-list li .business-info .business-info-detail {
    flex: 1;
    margin-left: 3vw;
}

.wrapper .business-list li .business-info .business-info-detail h3 {
    font-size: 4vw;
    margin: 0 0 2vw 0;
    color: #333;
}

.wrapper .business-list li .business-info .business-info-rating {
    display: flex;
    align-items: center;
    gap: 3vw;
    margin-bottom: 2vw;
}

.wrapper .business-list li .business-info .business-info-rating .rating-score {
    font-size: 3.2vw;
    color: #FF6600;
    font-weight: 600;
}

.wrapper .business-list li .business-info .business-info-rating .monthly-sales {
    font-size: 2.8vw;
    color: #999;
}

.wrapper .business-list li .business-info .business-info-delivery {
    display: flex;
    gap: 2vw;
    margin-bottom: 2vw;
}

.wrapper .business-list li .business-info .business-info-delivery .start-price {
    font-size: 2.8vw;
    color: #666;
}

.wrapper .business-list li .business-info .business-info-delivery .delivery-fee {
    font-size: 2.8vw;
    color: #666;
}

.wrapper .business-list li .business-info .business-info-delivery .delivery-fee.free-delivery {
    color: #FF6600;
    font-weight: 500;
}

.wrapper .business-list li .business-info .business-info-promotion {
    display: flex;
    align-items: center;
}

.wrapper .business-list li .business-info .business-info-promotion .business-info-promotion-left {
    display: flex;
    align-items: center;
    gap: 1vw;
}

.wrapper .business-list li .business-info .business-info-promotion .business-info-promotion-left .business-info-promotion-left-incon {
    background-color: #ff4444;
    color: white;
    padding: 0.5vw 1vw;
    border-radius: 2px;
    font-size: 2.5vw;
}

.wrapper .business-list li .business-info .business-info-promotion .business-info-promotion-left p {
    color: #666;
    font-size: 3vw;
    margin: 0;
}

/* 位置显示样式 */
.location-text {
    cursor: pointer;
    transition: color 0.3s;
    display: flex;
    align-items: center;
    gap: 4px;
}

.location-text:hover {
    color: #e0e0e0;
}

.location-display {
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 模态框样式 */
.location-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    padding: 20px;
}

.modal-container {
    background: white;
    border-radius: 12px;
    width: 100%;
    max-width: 400px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    overflow: hidden;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid #f0f0f0;
    background: linear-gradient(135deg, #0097ff, #0066cc);
    color: white;
}

.modal-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
}

.close-btn {
    background: none;
    border: none;
    color: white;
    font-size: 20px;
    cursor: pointer;
    padding: 5px;
    border-radius: 50%;
    transition: background-color 0.3s;
}

.close-btn:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

.modal-content {
    display: flex;
    flex-direction: column;
    padding: 20px;
    margin-left: 27px;
    margin-top: 10px;
    margin-bottom: 10px;
    overflow-y: auto;
}

/* 位置导航样式 */
.location-nav {
    display: flex;
    margin-bottom: 20px;
    border-bottom: 2px solid #f0f0f0;
}

.nav-item {
    padding: 12px 20px;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    transition: all 0.3s;
    font-weight: 500;
    color: #666;
}

.nav-item.active {
    color: #0097ff;
    border-bottom-color: #0097ff;
}

.nav-item.disabled {
    color: #ccc;
    cursor: not-allowed;
}

.nav-item:not(.disabled):hover {
    color: #0097ff;
}

/* 位置列表样式 */
.location-list-container {
    min-height: 200px;
    max-height: 300px;
    overflow-y: auto;
    margin-bottom: 20px;
}

.loading-state,
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 150px;
    color: #999;
}

.loading-state i,
.empty-state i {
    font-size: 24px;
    margin-bottom: 10px;
}

.location-items {
    display: grid;
    gap: 8px;
}

.location-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s;
}

.location-item:hover {
    border-color: #0097ff;
    background-color: #f8f9ff;
}

.location-item.selected {
    border-color: #0097ff;
    background-color: #e6f3ff;
}

.item-name {
    font-weight: 500;
}

.selected-icon {
    color: #0097ff;
    font-size: 14px;
}

/* 当前选择显示 */
.current-selection {
    padding: 15px;
    background-color: #f8f9fa;
    border-radius: 8px;
    margin-top: 15px;
}

.selection-text {
    font-weight: 600;
    color: #0097ff;
    display: inline-block;
    max-width: 250px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 模态框底部 */
.modal-footer {
    display: flex;
    gap: 12px;
    padding: 20px;
    border-top: 1px solid #f0f0f0;
    background-color: #fafafa;
}

.btn-cancel,
.btn-confirm {
    flex: 1;
    padding: 12px;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
}

.btn-cancel {
    background-color: #f8f9fa;
    color: #666;
}

.btn-cancel:hover {
    background-color: #e9ecef;
}

.btn-confirm {
    background: linear-gradient(135deg, #0097ff, #0066cc);
    color: white;
}

.btn-confirm:hover {
    background: linear-gradient(135deg, #0080e0, #0055aa);
    transform: translateY(-1px);
}

/* 动画效果 */
.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.3s;
}

.fade-enter-from,
.fade-leave-to {
    opacity: 0;
}

/* 空状态样式 */
.empty-carousel,
.empty-business-list {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 200px;
    padding: 40px 20px;
}

.empty-carousel .empty-state,
.empty-business-list .empty-state {
    text-align: center;
    color: #999;
}

.empty-carousel .empty-state i,
.empty-business-list .empty-state i {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.5;
}

.empty-carousel .empty-state p,
.empty-business-list .empty-state p {
    font-size: 16px;
    margin: 8px 0;
}

.empty-business-list .empty-state .empty-hint {
    font-size: 14px;
    color: #ccc;
}

/* 推荐方式样式 */
.wrapper .recommendtype {
    width: 100%;
    height: 5vw;
    margin-bottom: 5vw;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.wrapper .recommendtype li {
    font-size: 3.5vw;
    color: #555;
    cursor: pointer;
    transition: color 0.3s;
    padding: 1vw 2vw;
    border-radius: 1vw;
}

.wrapper .recommendtype li:hover {
    color: #0097ff;
}

.wrapper .recommendtype li.active {
    color: #0097ff;
    background-color: #f0f8ff;
}

/* 筛选弹窗样式 */
.filter-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    padding: 20px;
}

.filter-container {
    background: white;
    border-radius: 12px;
    width: 100%;
    max-width: 400px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    overflow: hidden;
}

.filter-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid #f0f0f0;
    background: linear-gradient(135deg, #0097ff, #0066cc);
    color: white;
}

.filter-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
}

.close-btn {
    background: none;
    border: none;
    color: white;
    font-size: 20px;
    cursor: pointer;
    padding: 5px;
    border-radius: 50%;
    transition: background-color 0.3s;
}

.close-btn:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

.filter-content {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
}

.filter-section {
    margin-bottom: 25px;
}

.filter-section h4 {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 15px 0;
    color: #333;
}

.filter-option {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 14px;
    color: #666;
}

.filter-option input[type="checkbox"],
.filter-option input[type="radio"] {
    margin-right: 10px;
    transform: scale(1.2);
}

.filter-option:hover {
    color: #0097ff;
}

.price-range {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.filter-footer {
    display: flex;
    gap: 12px;
    padding: 20px;
    border-top: 1px solid #f0f0f0;
    background-color: #fafafa;
}

.btn-reset,
.btn-confirm {
    flex: 1;
    padding: 12px;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
}

.btn-reset {
    background-color: #f8f9fa;
    color: #666;
}

.btn-reset:hover {
    background-color: #e9ecef;
}

.btn-confirm {
    background: linear-gradient(135deg, #0097ff, #0066cc);
    color: white;
}

.btn-confirm:hover {
    background: linear-gradient(135deg, #0080e0, #0055aa);
    transform: translateY(-1px);
}

.ai-chat {
    position: fixed;
  bottom: 100px; /* 距离底部40px */
  right: 20px; /* 距离右边20px */
  z-index: 9999;
}
</style>